$f: 19.2;


.home {
  .banner {
    position: relative;

    // &::before {
    //   content: '';
    //   display: block;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   width: 100%;
    //   height: 100%;
    //   background: rgba(0, 0, 0, .25);
    // }

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    .text {
      position: absolute;
      left: 240/$f+vw;
      bottom: 196/$f+vw;

      h1 {
        line-height: 1.2;
        color: #FFF;
        font-size: 75/$f+vw;
        font-weight: 600;
        text-transform: capitalize;
      }

      .line {
        width: 98/$f+vw;
        height: 8/$f+vw;
        background: linear-gradient(90deg, #3E88FF 0%, #146DFC 100%);
        margin-top: 10/$f+vw;
      }
    }
  }

  .main {
    padding: 100/$f+vw 240/$f+vw;
    background: url(../images/nbg.png) no-repeat;
    background-size: cover;

    .t {
      color: #000;
      font-size: 48/$f+vw;
      font-weight: 600;
      text-align: center;
      text-transform: capitalize;
      letter-spacing: 1px;
    }

    .section1 {
      display: flex;
      justify-content: space-between;
      margin: 80/$f+vw 0 100/$f+vw 0;

      .text {
        width: 677/$f+vw;

        .p1 {
          color: #000;
          font-size: 40/$f+vw;
          font-weight: 600;
          margin-top: 40/$f+vw;
        }

        .des {
          margin-top: 40/$f+vw;
          color: #000;
          font-size: 20/$f+vw;
          line-height: 1.5;
        }
      }

      .pic {
        img {
          width: 660/$f+vw;
          height: 498/$f+vw;
          border-radius: 20/$f+vw;
          display: block;
          transition: all 2s;
        }

        &:hover {
          img {
            transform: scale(1.05);
          }
        }
      }
    }

    .chose {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 60/$f+vw;
      position: relative;
      z-index: 10;

      .types {
        position: relative;

        .d1 {
          width: 496/$f+vw;
          height: 66/$f+vw;
          border-radius: 87/$f+vw;
          background: #DEEAFF;
          padding: 13/$f+vw 40/$f+vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #000;
          font-size: 20/$f+vw;
          line-height: 2;
          letter-spacing: 1px;
          text-transform: capitalize;
          cursor: pointer;
        }

        .d2 {
          border-radius: 8/$f+vw;
          background: #FFF;
          position: absolute;
          left: 0;
          top: 100%;
          z-index: 10;
          width: 100%;
          padding: 14/$f+vw;
          box-shadow: 0 0 10px rgba(0, 0, 0, .05);
          display: none;

          p {
            padding: 12/$f+vw 10/$f+vw;
            color: #000;
            font-size: 16/$f+vw;
            font-weight: 300;
            line-height: 1.25;
            border-radius: 4/$f+vw;
            transition: all 600ms;
            cursor: pointer;

            &:hover {
              background: #DCE8FE;
            }
          }
        }
      }
    }

    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40/$f+vw 30/$f+vw;

      a {
        display: block;
        width: 100%;
        background: #F5F5F5;
        border-radius: 20/$f+vw ;
        overflow: hidden;

        .pic {
          overflow: hidden;

          img {
            width: 100%;
            display: block;
            object-fit: cover;
            height: 242/$f+vw;
            border-radius: 20/$f+vw 20/$f+vw 0px 0px;
            transition: all 600ms;
          }
        }

        .text {
          padding: 24/$f+vw 20/$f+vw;

          .time {
            color: #666;
            font-size: 16/$f+vw;
            line-height: 1.25;
          }

          h1 {
            color: #000;
            font-size: 19/$f+vw;
            line-height: 1.8;
            font-weight: 400;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-top: 12/$f+vw;
          }
        }

        &:hover {
          .pic {
            img {
              transform: scale(1.05);
            }
          }
        }
      }
    }

    .pager {
      display: flex;
      justify-content: center;
      margin-top: 70/$f+vw;

      a {
        margin: 0 5/$f+vw;
        width: 24/$f+vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 400;
        color: #8B8B8B;

        svg {
          width: 24/$f+vw;
          display: block;
        }
      }

      .nums {
        display: flex;

        a {
          border-bottom: 2px solid transparent;
        }

        .on {
          border-color: #3279FF;
          color: #3279FF;
          font-weight: 600;
        }
      }
    }
  }

  .welcome {
    width: 100%;
    background: url(../images/welcome.png) no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100/$f+vw 0;

    h1 {
      text-align: center;
      color: #FFF;
      font-size: 48/$f+vw;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: capitalize;
    }

    a {
      display: flex;
      width: fit-content;
      padding: 8/$f+vw 30/$f+vw;
      justify-content: center;
      align-items: center;
      gap: 20/$f+vw;
      border-radius: 91/$f+vw;
      border: 1px solid #000;
      background: #000;
      transition: all 600ms;
      margin: 60/$f+vw auto 0 auto;
      transition: all 600ms;
      color: #FFF;
      font-size: 20/$f+vw;

      p {
        line-height: 2;
        letter-spacing: 1px;
        text-transform: uppercase;
      }

      svg {
        width: 16/$f+vw;
        display: block;
      }

      &:hover {
        background: #5E9EFF;
        border-color: #5E9EFF;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .banner {
      margin-top: 60px;

      img {
        height: 150px;
      }

      .text {
        left: 5%;
        width: 90%;
        bottom: 30%;

        h1 {
          font-size: 20px;
        }

        .line {
          width: 60px;
          height: 2px;
          margin: 5px 0 15px 0;
        }
      }
    }

    .main {
      padding: 30px 5% 60px 5%;

      .t {
        font-size: 24px;
      }

      .section1 {
        margin: 30px 0;
        flex-direction: column;

        .text {
          width: 100%;

          .p1 {
            font-size: 20px;
            margin-top: 0;
          }

          .des {
            font-size: 16px;
            margin-top: 20px;
          }
        }

        .pic {
          margin-top: 20px;

          img {
            width: 100%;
            height: auto;
            border-radius: 10px;
          }
        }
      }

      .chose {
        margin-bottom: 20px;

        .types {
          width: 100%;

          .d1 {
            width: 100%;
            height: 50px;
            padding: 13px 20px;
            font-size: 18px;
            border-radius: 60px;
          }

          .d2 {
            border-radius: 8px;
            padding: 14px;

            p {
              padding: 12px 10px;
              font-size: 16px;
              border-radius: 4px;
            }
          }
        }
      }

      .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;

        a {
          border-radius: 10px;

          .pic {
            img {
              height: 150px;
              border-radius: 10px 10px 0 0;
            }
          }

          .text {
            padding: 15px 18px;

            .time {
              font-size: 16px;
            }

            h1 {
              font-size: 18px;
              margin-top: 5px;
            }
          }
        }
      }

      .pager {
        margin-top: 35px;

        a {
          margin: 0 5px;
          width: 24px;
          font-size: 16px;

          svg {
            width: 24px;
          }
        }
      }
    }

    .welcome {
      padding: 50px 0;

      h1 {
        font-size: 24px;
      }

      a {
        padding: 4px 15px;
        gap: 10px;
        font-size: 18px;
        border-radius: 80px;
        margin: 30px auto 0 auto;
        svg {
          width: 16px;
        }
      }
    }
  }
}